<template>
  <div>
    <div class="header tc fw-b pt-10 pb-10">企业微信通讯录</div>
    <div class="pd-10">
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keywords" size="small"></el-input>
      <el-table
        :data="list"
        size="small"
        @selection-change="handleSelectionChange"
        class="mt-20"
        height="250"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <div class="d-flex f-align">
              <el-avatar shape="square" size="small" class="mr-5"></el-avatar>
              <p>{{scope.row.name}}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="tr mt-10">
        <el-button size="mini">取消</el-button>
        <el-button type="primary" size="mini">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getContactList } from "api/user";
export default {
  data() {
    return {
      keywords: "",
      list: [
        { name: "王远霞", src: "" },
        { name: "susan", src: "" }
      ],
      loading: false
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    handleSelectionChange(val) {},
    loadData() {
      if (this.loading) return;
      this.loading = true;
      getContactList()
        .then(res => {
          this.list = res.data;
          this.loading = false;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    }
  }
};
</script>

<style lang='scss' scoped>
@import "styles/variables";
.header {
  background-color: rgba($color: $themeColor, $alpha: 0.1);
}
</style>
